import React from 'react';
import { Animated, Easing } from 'react-native';

class LoadingAnimation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      rotateValue: new Animated.Value(0)
    };
  }

  componentDidMount() {
    this.animate();
  }

  animate = () => {
    Animated.loop(
      Animated.timing(this.state.rotateValue, {
        toValue: 1,
        duration: 1000,
        easing: Easing.linear,
        useNativeDriver: true
      })
    ).start();
  }

  render() {
    const interpolateRotation = this.state.rotateValue.interpolate({
      inputRange: [0, 1],
      outputRange: ['0deg', '360deg']
    });

    return (
      <Animated.View style={{ transform: [{ rotate: interpolateRotation }] }}>
        {this.props.children}
      </Animated.View>
    );
  }
}

export default LoadingAnimation;